<template>
  <div>
    <el-row>
      <el-col>
        <div id="pie" :style="{width: '100%', height: '300px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('pie'));
        // 绘制图表
        myChart.setOption(
          {
            title: {
              text: '2000',
              x: 'center',
              y: 'center',
              textStyle: {
                fontWeight: 'normal',
                color: '#fff',
                fontSize: '15'
              }
            },
            color: ['rgba(176, 212, 251, 1)'],
            tooltip: {
              show: false,
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              show: false,
              itemGap: 12,
              data: ['01', '02']
            },
            toolbox: {
              show: false,
              feature: {
                mark: {
                  show: true
                },
                dataView: {
                  show: true,
                  readOnly: false
                },
                restore: {
                  show: true
                }
              }
            },
            series: [{
              name: 'Line 1',
              type: 'pie',
              clockWise: true,
              radius: ['50%', '56%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              hoverAnimation: false,

              data: [{
                value: 30,
                name: '01',
                itemStyle: {
                  normal: {
                    color: {  // 完成的圆环的颜色
                      colorStops: [{
                        offset: 0, color: '#00cefc' // 0% 处的颜色
                      }, {
                        offset: 1, color: '#7b9e02' // 100% 处的颜色
                      }]
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: '#7b9e02' // 鼠标悬浮上去完成的圆环的颜色
                  }
                }
              }, {
                value: 70,
                name: 'invisible'
              }]
            }
            ]
          }
        );
      }
    }
  }
</script>

<style scoped>

</style>
